<template>
  <h3>这是首页</h3>
  <p>count: {{ count }}</p>
  <p>doubleCount: {{ doubleCount }}</p>
  <p>name: {{ name }}</p>
  <button @click="fn">btn</button>

  <button @click="reset">重置state</button>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useCounter } from "../stores/counter";

// 在组件里面引入对应的那个分模块以后的仓库
// 调用这个函数，可以得到这个小仓库的实例
const couterStore = useCounter();

// console.log(couterStore.count);
const count = computed(() => couterStore.count);
const doubleCount = computed(() => couterStore.doubleCount);
const name = computed(() => couterStore.name);

const fn = () => {
  // 仓库的数据是允许直接修改的
  // couterStore.count++;
  // couterStore.name = "lisi";
  // couterStore.$patch({
  //   count: 10,
  //   name: "lisi",
  // });
  couterStore.add(7);
};

// 实例的$reset()方法可以重置仓库数据
const reset = () => {
  couterStore.$reset();
};

couterStore.$subscribe((mutation, state) => {
  // import { MutationType } from 'pinia'
  // mutation.type; // 'direct' | 'patch object' | 'patch function'
  // 和 cartStore.$id 一样
  // mutation.storeId; // 'cart'
  // 只有 mutation.type === 'patch object'的情况下才可用
  // mutation.payload // 传递给 cartStore.$patch() 的补丁对象。

  // 每当状态发生变化时，将整个 state 持久化到本地存储。
  // localStorage.setItem('cart', JSON.stringify(state))
  console.log(mutation);
  console.log(state);
});
</script>
